<template>
  <div ref="echartsRef" class="echartsContainer"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onBeforeUnmount, onMounted, ref } from "vue";

const echartsRef = ref<HTMLDivElement>();

let myChart = ref<echarts.ECharts>();
onMounted(() => {
  initEcharts();
  window.addEventListener("resize", handleWinResize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleWinResize);
});

const handleWinResize = () => {
  // myChart.value && myChart.value.resize()
};

const initEcharts = () => {
  myChart.value = echarts.init(echartsRef.value);
  updateOptions();
};

const updateOptions = () => {
  myChart.value?.setOption({
    tooltip: {
      formatter: function (params: any) {
        return params.value[0] + "<br/>" + params.value[1];
      },
    },
    visualMap: {
      min: 0,
      max: 10000,
      type: "piecewise",
      orient: "horizontal",
      right: 100,
      top: 65,
      inRange: {
        color: ["#ebeced", "#daf4e9", "#a4e5ca", "#64d3a6", "#07b870"],
      },
      itemSymbol: "roundRect",
      showLabel: false,
      selectedMode: false,
      align: "right",
      itemGap: 4,
      itemWidth: 20,
      itemHeight: 20,
      text: ["高", "低"],
      textStyle: {
        color: "#000",
        fontSize: 12,
      },
    },
    calendar: {
      top: 120,
      left: 100,
      right: 100,
      cellSize: [25, 25],
      range: "2024",
      itemStyle: {
        borderWidth: 5,
        borderColor: "#fff",
      },
      splitLine: {
        show: false,
      },
      yearLabel: { show: false },
      monthLabel: {
        show: true,
        nameMap: "ZH",
        position: "end",
      },
      dayLabel: {
        show: true,
        firstDay: 1,
        nameMap: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
        position: "start",
      },
    },
    series: {
      type: "heatmap",
      coordinateSystem: "calendar",
      data: getVirtualData("2024"),
    },
  });
};
function getVirtualData(year: string) {
  const date = +echarts.time.parse(year + "-01-01");
  const end = +echarts.time.parse(+year + 1 + "-01-01");
  const dayTime = 3600 * 24 * 1000;
  const data = [];
  for (let time = date; time < end; time += dayTime) {
    data.push([
      echarts.time.format(time, "{yyyy}-{MM}-{dd}", false),
      Math.floor(Math.random() * 10000),
    ]);
  }
  return data;
}
</script>

<style scoped lang="scss">
.echartsContainer {
  width: 100%;
  height: 400px;
  background-color: #fff;
}
</style>
